<template>
  <view>
      <view id="banner">
          <view class="amountBg">
              <view class="logo">
                  <open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data>
              </view>
              <view class="account">
                  <open-data type="userNickName" lang="zh_CN">
                  </open-data>
              </view>
          </view>
      </view>
      <view>
          <view id="bord">
              <button  @click="geren"  class="ziti">
                  <navigator hover-class="navigator-hover">
                      <span id="geren" class="iconfont icon-touxiang">个人信息</span>
                      <img class="youbian" src="../../static/img/xiaojiantou.png" alt="">
                  </navigator>
              </button>
          </view>
          <view id="bord">
              <button open-type="contact" class="ziti">
                  <navigator  hover-class="navigator-hover">
                      <span id="lingxing" class="iconfont icon-icon-test">联系客服</span>
                      <img class="youbian" src="../../static/img/xiaojiantou.png" alt="">
                  </navigator>
              </button>
          </view>
          <view id="bord">
              <button @click="tixin" class="ziti">
                  <navigator  hover-class="navigator-hover">
                      <span id="tixin" class="iconfont icon-tixing">生日提醒</span>
                      <img class="youbian" src="../../static/img/xiaojiantou.png" alt="">
                  </navigator>
              </button>
          </view>
          <view id="bord">
              <button @click="guanyu"  class="ziti">
                  <navigator hover-class="navigator-hover">
                      <span id="guanyu" class="iconfont icon-guanyuwomen">关于我们</span>
                      <img class="youbian" src="../../static/img/xiaojiantou.png" alt="">
                  </navigator>
              </button>
          </view>
      </view>
  </view>
</template>

<script>
export default {
    data(){

    },
    methods:{
        /*个人信息*/
        geren(){
            uni.navigateTo({
                url: '/pages/wode/gerenxinxi/gerenxinxi'
            })
        },
        /*生日提醒*/
        tixin(){
            uni.navigateTo({
                url: '/pages/wode/shenretixin/shenretixin'
            })
        },
        /*关于我们*/
        guanyu(){
            uni.navigateTo({
                url: '/pages/wode/aboutus'
            })
        }
    }

}

</script>

<style>
    #userinfo {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        overflow: hidden;
        text-align: center;
    }
    #banner{
        width: 100%;
        height: 200px;
       background: linear-gradient(to bottom,#f48fb1FF,#FFF48FB1);
    }
    .amountBg{
        width: 60px;
        height: 60px;
        margin-left: 170px;
        padding-top: 69px;
    }
    #geren{
        float: left;
       font-size: 20px;
        color:#F48FB1FF ;
    }
    #lingxing{
        float: left;
        font-size: 20px;
        color:#F48FB1FF ;
    }
    #tixin{
        float: left;
        font-size: 20px;
        color:#F48FB1FF ;
    }
    #guanyu{
        float: left;
        font-size: 20px;
        color:#F48FB1FF ;
    }
    #bord{
        width: 100%;
        height: 60px;
        border: 1px solid #D7D6D6FF;
    }
    .youbian{
        width: 20px;
        height: 20px;
        float: right;
        margin-top: 20px;
    }
    .ziti{
       background-color: white;
        width: 100%;
        height: 60px;
        font-size: 20px;
    }
</style>